<script src="../asynx.js"></script>
<script src="../dom/dom.js"></script>
<script src="../impl/array.js"></script>
<script src="../impl/util.js"></script>
<script src="../impl/cookie.js"></script>
<script src="../impl/ajax.js"></script>
<script src="../impl/lang.js"></script>
<script src="../dom/xpath.js"></script>
<script src="../dom/selector.js"></script>
<script src="../event/event.js"></script>

<script src="../plugins/drag/drag.js"></script>
<script src="../plugins/animation/anim.js"></script>
<script src="../plugins/datalist/datalist.js"></script>
<script src="../plugins/autocomplete/autocomplete.js"></script>
<script src="../plugins/windows/windows.js"></script>

<h1>asynx Drag</h1>
<div id="log">LOG<br></div><br>

<div id="sDrag" ok="true">
	<div id="sDragTitle"><b>drag by here!</b></div>
	<div id="sDragBody">corpo...</div>
</div>

<script>
	
var overlay = new asynx.windows.overlay({

	closeOnClick:false,
	
	fixzIndex: false,
	
	onComplete: function() {
		asynx("sDrag").css({zIndex:99});
	}
	
});

overlay.show();

asynx('/body').css({
	fontFamily: 'Arial',
	fontSize: '11px'
});

asynx("//div[@ok]").css({
	bg: '#fff',
	height: '200px',
	width: '200px',
	border:'1px #999999 solid'
});

asynx('sDragTitle').css({
	bg: '#FBF8F4',
	borderBottom:'1px #999999 solid',
	padding: '5px'
});

asynx('sDragBody').css({pad:'5px'});


asynx('sDragTitle').mouseover(function(e){
	var t = asynx(e.target);
	t.css({cursor:'move'});
});


var d = new asynx.drag('sDrag');

d.setDragHandle('sDragTitle');

d.onStartDrag = function(el, e) {
	asynx(el).css({opacity:50});
}


d.onDrag = function(el, e) {
}

d.onEndDrag = function(el, e) {
	asynx(el).css({opacity:100,cursor:'auto'});
}

//window.disableSelection();

</script>